import React, { useEffect, useState, Key } from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table,Button } from "antd";
import { useNavigate, useParams } from "react-router-dom";

import { hosScheduleRequest, hosScheduleRuleRequest, hosScheduleWorkDateRequest } from "@api/hospital/hodpitalListRequest"

import type { hosScheduleWorkDateRetrunType, hosScheduleDepartmentType, BookingScheduleListType } from "@api/hospital/model/hospitalListType"


export default function HospitalSchedule() {
    //编程式路由加载
    const navigate = useNavigate()
    //定义加载状态
    const [isloading,setIsLoading] =  useState(false)
    //获取路由参数
    const { hoscode } = useParams()
    //定义列表数据
    const [treeData, setTreeData] = useState<hosScheduleDepartmentType>([])
    //定义排班规则数据
    const [rules, setRules] = useState<BookingScheduleListType>([])
    //定义初始页码
    const [page, setPage] = useState(1)
    //定义每页条数
    const [limit, setLimit] = useState(3)
    //定义总条数
    const [total, setTotal] = useState(0)
    //定义科室编号
    const [depcode, setDepcode] = useState('')
    // 200040878
    //定义时间
    const [workDate, setWorkDate] = useState('')
    // 2022-04-28
    //定义根据日期排班详情
    const [sourceData, setSourceData] = useState<hosScheduleWorkDateRetrunType>([])
    

    //初始获取科室列表数据
    useEffect(() => {
        const getList = async () => {
            const result = await hosScheduleRequest(hoscode as string)
            //保存列表数据
            setTreeData(result)
            //保存科室编码
            setDepcode((result[0].children as hosScheduleDepartmentType)[0].depcode)
        }
        getList()
    }, [])
    //初始获取科室排版规则
    useEffect(() => {
        const getRule = async () => {
            const result = await hosScheduleRuleRequest({ page, limit, hoscode: hoscode as string, depcode: depcode })
            //保存规则数据
            setRules(result.bookingScheduleList)
            //设置总条数
            setTotal(result.total)
            //设置排班时间
            setWorkDate(result.bookingScheduleList[0]?.workDate)
        }
        if(depcode)getRule()
    }, [page, limit, depcode])

    //初始获取日期排班详情
    useEffect(() => {
        
        const getDetail = async () => {
            setIsLoading(true)
            const result = await hosScheduleWorkDateRequest({
                hoscode: hoscode as string,
                depcode: depcode,
                workDate: workDate
            })
            setSourceData(result)
            setIsLoading(false)
        }
        
        if(workDate)getDetail()
    }, [depcode, workDate])


    //1.点击tree的事件回调函数
    const treeSelectHandle = (depCodeArr: Key[]) => {
        // console.log(depCodeArr[0]);

        setDepcode(depCodeArr[0] as string);
    };

    //2.点击事件的时间回调函数
    const scheduleRuleHandle = (workDate: string) => {
        return () => {
            setWorkDate(workDate);
        };
    };
    //table结构
    const columns = [
        {
            title: "序号",
            render(_: any, __: any, index: number) {
                return index + 1;
            },
        },
        {
            title: "职称",
            dataIndex: "title",
        },
        {
            title: "号源时间",
            dataIndex: "workDate",
        },
        {
            title: "可预约数",
            dataIndex: "reservedNumber  ",
        },
        {
            title: "挂号费用",
            dataIndex: "amount",
        },
        {
            title: "擅长技能",
            dataIndex: "skill",
        },
    ];
    const treeStyle = {
        border: "1px solid #000",
        height: "480px",
        overflow: "auto",
    };
    return (
        <Card>
            <p>选择：北京协和医院/多发性硬化专科门诊/2022-04-08</p>
            <Row gutter={20}>
                <Col span={5}>
                    <div>
                        <Tree
                            treeData={treeData as []}
                            style={treeStyle}
                            expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
                            fieldNames={{ title: "depname", key: "depcode" }}
                            onSelect={treeSelectHandle}
                        />
                    </div>
                </Col>
                <Col span={19}>
                    <div style={{ marginBottom: "20px" }}>
                        {rules.map(item => {
                            return <Tag
                                key={item.workDate}
                                onClick={scheduleRuleHandle(item.workDate)}
                                style={{ cursor: "pointer" }}
                            >
                                <p>{item.workDate}</p>
                                <p>{item.availableNumber}/{item.reservedNumber}</p>
                            </Tag>
                        })}
                    </div>
                    <Pagination
                        total={total}
                        current={page}
                        pageSize={limit}
                        pageSizeOptions={[3, 5, 8]}
                        showSizeChanger
                        onChange={(page, pageSize) => { setPage(page); setLimit(pageSize) }}
                    />

                    <Table
                        loading={isloading}
                        columns={columns}
                        style={{ marginTop: "20px" }}
                        dataSource={sourceData}
                        rowKey={"id"}
                    ></Table>
                    <Button onClick = {()=>{navigate(-1)}}>返回</Button>
                </Col>
            </Row>
        </Card>
    );
}
